<template>
	<view class="flex align-center px-5 py-3 " >
		<view class="flex-1 flex align-center justify-center  "
		 v-for="(item,index) in providerList" :key ="index">
		  <view :class="item.icon + ' ' +item.bgColor" class="iconfont  font-lg text-white  flex align-center 
		  justify-center rounded-circle " style="width: 100rpx;height: 100rpx;" ></view>
		</view>
		
			
	</view>
</template>

<script>
	export default{
		data(){
			return{
				providerList:[]
			}
		},
		mounted(){
			uni.getProvider({
				service: 'oauth',
				success: (result) => {
					this.providerList = result.provider.map((value) => {
						let providerName = '';
						let icon = ''
						let bgColor = ''
						switch (value) {
							case 'weixin':
								providerName = '微信登录'
								icon = 'icon-iconfontzhizuobiaozhunbduan32'
								bgColor = 'bg-success'
								break;
								
							case 'qq':
								providerName = 'QQ登录'
								icon = 'icon-qq'
								bgColor = 'bg-primary'
								break;
								
							case 'sinaweibo':
								providerName = '新浪微博登录'
								icon = 'icon-89'
								bgColor = 'bg-warning'
								break;	
						
							/* case 'univerify':
								providerName = '一键登录'
								icon = 'icon-pengyouquan'
								bgColor = 'bg-danger'
								break; */
						}
						return {
							name: providerName,
							id: value,
							icon:icon,
							bgColor:bgColor
						}
					});
			
				},
				fail: (error) => {
					console.log('获取登录通道失败', error);
				}
			});
			
			if (this.hasLogin && this.isUniverifyLogin) {
				this.getPhoneNumber(uni.getStorageSync(univerifyInfoKey)).then((phoneNumber) => {
					this.phoneNumber = phoneNumber
				})
			}
		}
	}
</script>

<style>
</style>
